<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>公司信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="org" :rules="rules" ref="org" label-width="100px" class="demo-ruleForm">
            <el-form-item label="公司名称" prop="untilname">
                <el-input v-model="org.untilname"></el-input>
            </el-form-item>
            <el-form-item label="公司地址" prop="address">
                <el-input v-model="org.address"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkname">
                <el-input v-model="org.linkname"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="linkphone">
                <el-input v-model="org.linkphone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="org.email"></el-input>
            </el-form-item>
            <!--<el-form-item label="上传图片">
                <el-upload
                    class="upload-demo"
                    action="http://127.0.0.1:8088/lcot/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :file-list="fileList"
                    name="image"
                    list-type="picture-card">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>-->
            <el-form-item label="公司简介" prop="remark">
                <quill-editor ref="myTextEditor" v-model="org.remark" :config="editorOption"></quill-editor>
                <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {quillEditor} from 'vue-quill-editor';
    import common from '../../../common/constant.js'
    import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item'
    import {Loading} from 'element-ui'
    export default {
        data: function () {
            return {
                org: {
                    untilname: '',
                    linkphone: '',
                    linkname: '',
                    email: '',
                    address: '',
                    remark: ''
                },
                orgReponse: [],
                fileList: [],
                remark: '<p>Hello BBK</p>',
                editorOption: {
                    // something config
                },
                rules: {
                    untilname: [
                        {required: true, message: '请输入公司名称', trigger: 'blur'},
                        {min: 1, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
                    ],
                    linkphone: [
                        {required: true, message: '请输入联系电话，多个一‘,’隔开，比如：15687809999,15687806767', trigger: 'blur'},
                        {min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'blur'}
                    ],
                    linkname: [
                        {required: true, message: '联系人', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '联系邮箱', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '公司地址，联系地址', trigger: 'blur'},
                        {min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ],
                }
            }
        },
        components: {
            ElFormItem,
            quillEditor
        },
        created: function () {
            this.initData()
        },
        methods: {
            onEditorChange({editor, html, text}) {
                this.content = html;
            },
            submit(){
                this.$refs['org'].validate((valid) => {
                    if (valid) {
                        let loadingInstance = Loading.service({
                            fullscreen: true,
                            text: "操作中......"
                        })
                        this.$http.post(common.homeUrl + '/org/save', this.org)
                            .then((response) => {
                                let responseData = response.data
                                if (responseData.flag === common.respons.seccuss) {
                                    this.message_ok()
                                    this.initData()
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '查询失败！',
                                        duration: 6000
                                    })
                                }
                                loadingInstance.close()
                            })
                            .catch(function (response) {
                                loadingInstance.close()
                                this.message_error()
                                console.log(response)
                            })
                    } else {
                        this.message_error()
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            initData(){
                let loadingInstance = Loading.service({
                    fullscreen: true,
                    text: "加载数据"
                });
                this.$http.get(common.homeUrl + '/org/tree')
                    .then((response) => {
                        let responseData = response.data
                        if (responseData.flag ===  common.respons.seccuss) {
                            let dataList = response.data.dataList;
                            if (dataList !== null && dataList.length !== 0) {
                                this.org = response.data.dataList[0]
                            }
                        } else {
                            this.message_error()
                        }
                        loadingInstance.close()
                    })
                    .catch(function (response) {
                        loadingInstance.close()
                        this.message_error()
                    })
            },
            message_error() {
                this.$notify.error({
                    title: '错误',
                    message: '操作失败'
                });
            },
            message_ok() {
                this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                });
            }
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quillEditor;
            }
        }
    }
</script>
<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
</style>
